//配置路由守卫
import router from "./router";
//导入进度条插件
import nProgress from "nprogress";
//进度条样式
import 'nprogress/nprogress.css'
//导入store获取token
import store from './store/index'
//动态路由
import { dynamicrouter } from "./router";

//声明一个不需要token权限就可以访问的路由
const whitelist = ['/login', '/404']
//前置守卫
router.beforeEach(async (to, from, next) => {
  //开启进度条
  nProgress.start()
  if (store.getters.token) {
    //存在token
    if (to.path === '/login') {
      //如果去的是登录页面
      //则自动中转到主页
      //如果通过next中转到另一个地址的话 , 那么这次路由跳转不会经过后置路由
      next('/')
      //如果不经过后置路由 , 进度条就不会关闭
      //这里需要手动关闭进度条
      nProgress.done()
    }
    else {
      //如果不去登录页
      //则直接放行
      //判断是否获取过用户信息
      //在这里获取用户信息 可以持久化数据
      //而在dashboard组件获取数据 当切换为其他组件时 数据会丢失
      if (!store.getters.userid) {
        //这里使用await函数 是强制等待获取用户数据函数执行并且返回结果后在执行其他指令
        //接收执行vuex中的获取用户的返回值
        const { roles } = await store.dispatch('user/getuserinfo')
        //筛选后的路由
        const filterrouter = dynamicrouter.filter(item => {
          return roles.menus.includes(item.name)
        })
        //将筛选后的路由添加到vuex中用户可以访问的路由
        store.commit('user/setperrouter',filterrouter)
        //添加动态路由
        //404页面需要放到所有路由的后面
        router.addRoutes([...filterrouter,  { path: '*', redirect: '/404', hidden: true }])
        //添加动态路由之后 路由器中不会保存这次的路由对象
        next(to.path)//使用该方法再次跳转这里 来保存这个路由对象
      }
      else{
        next()
      }
    }
  }
  else {
    //没有token
    if (whitelist.includes(to.path)) {
      next()
    }
    else {
      next('/login')
      nProgress.done()
    }

  }
})
//后置守卫
router.afterEach(() => {
  // 关闭进度条
  nProgress.done()
})